<template>
    <div id="contract_details">
        <div class="body">
            <el-row class="title">
                <el-col :span="5">产品详情</el-col>
<!--                <el-col :span="1" :offset="16">-->
<!--                    <el-button @click="change_product()">修改</el-button>-->
<!--                </el-col>-->
            </el-row>
            <!--修改产品-->
            <el-dialog v-dialogDrag :visible.sync="addproductVisible" width="50%" :close-on-click-modal="false" >
                <add_product ref="changeData"></add_product>
            </el-dialog>
            <!-- 产品详情 -->
            <el-form label-width="150px" style="overflow:hidden;padding-top:20px" >
                <el-form-item label="产品编号：">
                    {{detailData.proDetailId}}
                </el-form-item>
                <el-form-item label="产品图片：">
                    <el-image :src="detailData.proImgSrc" style="width:80px;height:80px"></el-image>
                </el-form-item>
                <el-form-item label="产品名称：" class="inline__">
                    {{detailData.product.productName}}
                </el-form-item>
                <el-form-item label="产品分类：" class="inline__">
                    {{detailData.product.proClassily.proClassilyName}}
                </el-form-item>
                <el-form-item label="产品品牌：" class="inline__">
                    {{detailData.product.productBrand}}
                </el-form-item>
                <el-form-item label="产品售价：" class="inline__">
                    {{detailData.proPrice?detailData.proPrice:0}}元
                </el-form-item>
                <el-form-item label="产品数量：" class="inline__">
                    {{detailData.proNum?detailData.proNum:0}}
                </el-form-item>
                <el-form-item label="是否上架：" class="inline__">
                    {{detailData.proOn==1?"是":"否"}}
                </el-form-item>
                <el-form-item label="属性规格：" class="inline__">
                    <span v-for="item in detailData.abilities" :key="item.abilityId">{{item.abilityName}} </span>
                </el-form-item>
            </el-form>
            <br/><br/>
        </div>
    </div>
</template>

<script>
    import add_product from "./add_product";

    export default {
        name: "product_detail",
        components:{add_product},
        data() {
            return {
                //详情页面的数据
                detailData: {},
                //修改产品弹框状态
                addproductVisible:false,
            }
        },
        methods:{
            //修改产品
            change_product(){
                this.$store.dispatch("setVueProduct",this);
                this.addproductVisible = true;
                this.$nextTick(function () {
                    this.detailData.abilities.forEach(i=>{
                        let obj={}
                        let ob={}
                        obj.attrId=i.attribute.attrId;
                        obj.attributeName=i.attribute.attrName;
                        obj.abilityId=i.abilityId;
                        obj.abilityName=i.abilityName;
                        ob.abilityName=i.abilityName;
                        ob.abilityId=i.abilityId;
                        ob.attribute=null;
                        ob.proDetails=null
                        this.$refs.changeData.attributeList.push(obj)
                        this.$refs.changeData.abilities.push(ob)
                    })
                    this.$refs.changeData.product.productId=this.detailData.product.productId;
                    this.$refs.changeData.product.proClassily=this.detailData.product.proClassily;
                    this.$refs.changeData.product.productName=this.detailData.product.productName;
                    this.$refs.changeData.product.productBrand=this.detailData.product.productBrand;
                    this.$refs.changeData.proDetails.proDetailId=this.detailData.proDetailId;
                    this.$refs.changeData.proDetails.proPrice=this.detailData.proPrice;
                    this.$refs.changeData.proDetails.proOn=this.detailData.proOn;
                    this.$refs.changeData.proDetails.proNum=this.detailData.proNum;
                    this.$refs.changeData.proDetails.proImgSrc=this.detailData.proImgSrc;
                })
            },
        },
        created(){
            this.detailData = JSON.parse(sessionStorage.getItem("product"));
            sessionStorage.removeItem("product")
        },
        /* 路由守卫 */
        beforeRouteEnter (to, from, next){
            if (sessionStorage.getItem("product")){
                next()
            }else{
                next({path:"/product_index"})
            }
        }
    }
</script>

<style scoped>
    #contract_details{margin: 0 auto; width: 1000px;}
    .body{background-color: #ffffff;width: 100%;margin-top: 50px}
    .title{border-bottom: 1.5px solid #ababab;margin:0 10px}
    .title .el-col{padding: 10px;font-size: 16px;line-height: 60px;}
    .inline__{width:50%!important;display:inline-block}
</style>